/* eslint-disable react/no-unused-state */
/* eslint-disable react/jsx-handler-names */
import { Form, Input } from 'antd';
import React from 'react';
import { ProductGroupTreeC, PrimaryC, FirstHeaderC, SecondHeaderC } from '../../../components';

class ProductGroupTreeDemo extends React.Component {
  constructor(props) {
    super(props);
    this.formRef = React.createRef();
    this.state = {
      init2: undefined,
      init4: undefined,
    };

    setTimeout(() => {
      this.setState({
        init2: '766a36a073f347039e6aeedd4da50cf9',
        init4: ['766a36a073f347039e6aeedd4da50cf9', '7e8df5adae95484581956ff71252479e'],
      });
    }, 3000);
  }

  onClick1 = () => {
    this.state.ProductGroupTreeC1.setSelect('766a36a073f347039e6aeedd4da50cf9');
  };

  onClick2 = () => {
    this.state.ProductGroupTreeC2.setSelect('7e8df5adae95484581956ff71252479e');
  };

  onClick3 = () => {
    this.state.ProductGroupTreeC3.setSelect(['766a36a073f347039e6aeedd4da50cf9']);
  };

  onClick4 = () => {
    this.state.ProductGroupTreeC4.setSelect(['7e8df5adae95484581956ff71252479e', '766a36a073f347039e6aeedd4da50cf9']);
  };

  getData = () => {
    console.log(this.formRef.current.getFieldsValue());
  };

  render() {
    return (
      <Form ref={this.formRef} labelWrap={true}>
        <PrimaryC onClick={this.getData} title='获取所有表单数据' />
        <div style={{ padding: '20px', width: '500px' }}>
          <FirstHeaderC title='单选模式' />
          <SecondHeaderC title='1.同步初始化' />
          <ProductGroupTreeC
            form={this.formRef.current}
            dataIndex='productId1'
            multiple={false}
            onRef={(ref) => this.setState({ ProductGroupTreeC1: ref })}
            initialValue={'04cf2c9879674936b7f091de9da59906'}
            onChange={(e) => console.log(e)}
          />
          <PrimaryC onClick={this.onClick1} title='更改数据' />

          <SecondHeaderC title='2.异步初始化' />
          <ProductGroupTreeC
            form={this.formRef.current}
            dataIndex='productId2'
            multiple={false}
            onRef={(ref) => this.setState({ ProductGroupTreeC2: ref })}
            initialValue={this.state.init2}
            onChange={(e) => console.log(e)}
          />
          <PrimaryC onClick={this.onClick2} title='更改数据' />
          <FirstHeaderC title='多选模式' />
          <SecondHeaderC title='3.同步初始化' />
          <ProductGroupTreeC
            form={this.formRef.current}
            dataIndex='productId3'
            onRef={(ref) => this.setState({ ProductGroupTreeC3: ref })}
            initialValue={['875bb28bf34d4991937a77753b9ba7ac', '7e8df5adae95484581956ff71252479e']}
            onChange={(e) => console.log(e)}
          />
          <PrimaryC onClick={this.onClick3} title='更改数据' />
          <SecondHeaderC title='4.异步初始化' />
          <ProductGroupTreeC
            form={this.formRef.current}
            dataIndex='productId4'
            onRef={(ref) => this.setState({ ProductGroupTreeC4: ref })}
            initialValue={this.state.init4}
            onChange={(e) => console.log(e)}
          />
          <PrimaryC onClick={this.onClick4} title='更改数据' />
          <FirstHeaderC title='其他设置' />
          <SecondHeaderC title='5.设置rules、helper、权限、layout' />
          <ProductGroupTreeC
            form={this.formRef.current}
            dataIndex='productId5'
            rules={[{ required: true, message: '请选择组合!' }]}
            helper='lalal'
            authority={'write'}
            allowClear={true}
            formItemLayout={{
              labelCol: {
                span: 8,
                offset: 2,
              },
              wrapperCol: {
                span: 12,
                offset: 2,
              },
            }}
          />
          <SecondHeaderC title='6.显示checkbox' />
          <ProductGroupTreeC form={this.formRef.current} dataIndex='productId6' helper='lalal' onChange={(e) => console.log(e)} treeCheckable={true} />
          <SecondHeaderC title='7 产品-组合树形结构(设置investmentType)' />
          <ProductGroupTreeC
            form={this.formRef.current}
            dataIndex='productId7'
            multiple={true}
            onRef={(ref) => this.setState({ ProductGroupTreeC7: ref })}
            investmentType={'FB'}
            onChange={(e) => console.log(e)}
          />
          <SecondHeaderC title='8 设置交易模式' />
          <ProductGroupTreeC
            form={this.formRef.current}
            dataIndex='productId8'
            multiple={true}
            onRef={(ref) => this.setState({ ProductGroupTreeC7: ref })}
            onChange={(e) => console.log(e)}
            tradeModel={['BOOKKEEPING_MODE', 'COMMAND_MODE', 'VALUATION_BOOKKEEPING_MODEL']}
          />
        </div>
      </Form>
    );
  }
}

export default ProductGroupTreeDemo;
